<template>
    <div class="formList">
        <!-- 级联选择器 -->
        <el-cascader
            v-if="data.type == 'cascader'"
            v-model="itemData[data.prop]"
            @change="change"
            :options="data.selectOption"
            :show-all-levels="false"
            :props="data.selectProps"
            class="editorformItemFunCascader"
        />
        <!-- 输入框 -->
        <el-input v-if="data.type == 'input'" v-model="itemData[data.prop]" @change="change" @input="change" class="editorforminput" placeholder="请输入文字内容" />
        <!-- 下拉框 -->
        <el-select v-if="data.type == 'select'" v-model="itemData[data.prop]" class="editorforminput" @change="change">
            <el-option v-for="opt in data.selectOption" :key="opt.value" :label="opt.label" :value="opt.value" />
        </el-select>
        <!-- 数字输入框 -->
        <el-input-number
            v-if="data.type == 'number'"
            v-model="itemData[data.prop]"
            @change="change"
            @input="change"
            class="editorforminput"
            :step="data.numberStep"
            conliols-position="right"
            :min="data.numberMin"
            :max="data.numberMax || 9999999999"
        />
        <!-- 开关 -->
        <el-switch
            v-if="data.type == 'switch'"
            v-model="itemData[data.prop]"
            @change="change"
            :active-value="data.activeValue"
            :inactive-value="data.inactiveValue"
            style="--el-switch-on-color: rgba(32, 160, 255)"
        />
        <!-- 颜色选择器 -->
        <el-color-picker v-if="data.type == 'color'" :predefine="defaultColor" @change="change" show-alpha class="editorforminput" v-model="itemData[data.prop]" />
        <!-- 文本 -->
        <span v-if="data.type == 'text'">{{ data.unit ? itemData[data.prop].toFixed(2) : itemData[data.prop] }}{{ data.unit ? ` ${data.unit}` : "" }}</span>
        <!-- 文本 只显示用 -->
        <span v-if="data.type == 'tip'">文本</span>
        <!-- 图标上传 -->
        <div class="editorformItemRight" v-if="data.type == 'upload'">
            <img
                class="img"
                style="width: 32px; height: 32px"
                :src="
                    itemData[data.prop].includes('http') ? itemData[data.prop] : itemData[data.prop].includes('sxnf-cloud') ? `${drawUrl1}${itemData[data.prop]}` : `${drawUrl}${itemData[data.prop]}`
                "
                :fit="data.prop == 'icon' ? 'cover' : 'contain'"
            />
            <el-upload class="uploade" :show-file-list="false" accept=".png,.jpg,.jpeg" :http-request="fileHpptRequest">
                <el-button style="color: #ffffff" link size="small">上传</el-button>
            </el-upload>
        </div>

        <!-- 面积单位选择 -->
        <el-radio-group v-if="data.type == 'radio'" v-model="itemData[data.prop]" size="small" @change="change">
            <el-radio-button label="平方米" value="1" />
            <el-radio-button label="亩" value="2" />
            <el-radio-button label="公顷" value="3" />
        </el-radio-group>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref, reactive, nextTick } from "vue";
import { uploadDrawIcon } from "@/api/draw";
import { defaultColor, material } from "@/config/config";
import { calcVolume } from "@/utils/draw/saveEditorDrawData";
import { widget } from "@/utils/global";
/**
 * @data 列表数据
 * name: "是否被遮挡", // 名称
 * prop: "point", // 字段
 * viceProp: "lat", // 副字段
 * type: "switch", // 类型
 * selectOption: [], // 下拉框数据
 * numberStep: 0, // 数字步长
 * numberMin: 0, // 数字最小值
 * activeValue: true, // switch激活值
 * inactiveValue: false, // switch非激活值
 * show: true, // 是否显示
 */
/**
 * 组件传值
 */
interface Props {
    graphic?: any; // 图形数据
    data?: any; // 列表数据
}
/**
 * props默认值
 */
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    data: {},
});
/**
 * 组件数据
 */
const data = reactive(props.data);
// 标绘数据
let graphic = reactive(props.graphic);
// 标绘数据
let options = reactive(graphic.options);
// 标绘style样式
let style = reactive(options.style);
// 单点坐标
let point = reactive(graphic.point ? graphic.point : {});
let itemData: any = reactive({});
// 标绘图标url
const drawUrl = ref(import.meta.env.VITE_BASE_XYZ);
const drawUrl1 = ref(import.meta.env.VITE_BASE_ICON);
// console.log(data);
if (data) {
    switch (data.dataLayer) {
        case "options":
            itemData = options;
            // console.log("itemData.value", itemData);
            break;
        case "style":
            itemData = style;
            break;
        case "point":
            itemData = point;
            break;
        case "materialOptions":
            itemData = style.materialOptions;
            break;
        case "label":
            itemData = style.label;
            break;
        default:
            break;
    }
}
/**
 * 父组件方法
 */
const emits = defineEmits(["formChange"]);
/**
 * 参数改变函数
 */
const change = () => {
    emits("formChange");
    widget.isEditorStyles = true;
    // 设置样式
    // console.log("当前项属性:", data.dataLayer);
    switch (data.dataLayer) {
        case "options":
            // itemData.value = options;
            // delete itemData.style.label;
            graphic.setOptions(itemData);
            // console.log("itemData.value", itemData);
            break;
        case "style":
            try {
                if (data.prop == "materialType") {
                    graphic.setStyle({
                        materialOptions: JSON.parse(JSON.stringify(material[itemData[data.prop]])),
                    });
                } else {
                    // 更新样式数据
                    graphic.setStyle(JSON.parse(JSON.stringify(itemData)));
                }
            } catch (error) {
                if (itemData.rotation || itemData.stRotation) {
                    delete itemData.rotation;
                    delete itemData.stRotation;
                    graphic.setStyle(JSON.parse(JSON.stringify(itemData)));
                }
            }
            break;
        case "materialOptions":
            graphic.setStyle({
                materialOptions: itemData,
            });
            break;

        case "label":
            if (data.prop == "isLength" || data.prop == "isLabel" || data.prop == "isArea" || data.prop == "isVolume") {
                if (!itemData.isLabel && !itemData.isLength && !itemData.isArea && !itemData.isVolume) {
                    itemData.text = "";
                    itemData.outline = false;
                    itemData.background = false;
                    itemData.hasPixelOffset = false;
                } else if (itemData.isLength || itemData.isLabel || itemData.isArea || itemData.isVolume) {
                    if (itemData.isLength && data.prop == "isLength") {
                        itemData.text = graphic.distance.toFixed(2) + " m";
                        itemData.isLabel = false;
                    }
                    if (itemData.isLabel && data.prop == "isLabel") {
                        itemData.isLength = false;
                        itemData.isArea = false;
                        itemData.isVolume = false;
                    }
                    if (itemData.isArea && data.prop == "isArea") {
                        let areaType = graphic.type;

                        // 多边形
                        if (areaType == "polygon") {
                            if (itemData.unit == "1") {
                                itemData.text = graphic.area.toFixed(2) + " ㎡";
                            }
                            if (itemData.unit == "2") {
                                itemData.text = (graphic.area / 666.67).toFixed(2) + " 亩";
                            }
                            if (itemData.unit == "3") {
                                itemData.text = (graphic.area / 10000).toFixed(2) + "公顷";
                            }
                        } else {
                            itemData.text = areaType == "plane" ? (style.dimensions_y * style.dimensions_x).toFixed(2) + " ㎡" : graphic.area.toFixed(2) + " ㎡";
                        }
                        itemData.isLabel = false;
                    }
                    if (itemData.isVolume && data.prop == "isVolume") {
                        // 计算三维立体数据的体积
                        itemData.text = calcVolume(graphic).toFixed(2) + " m³";
                        itemData.isLabel = false;
                    }
                }
            }
            if (data.prop == "unit") {
                console.log(itemData);
                if (itemData.unit == "1") {
                    itemData.text = graphic.area.toFixed(2) + " ㎡";
                }
                if (itemData.unit == "2") {
                    itemData.text = (graphic.area / 666.67).toFixed(2) + " 亩";
                }
                if (itemData.unit == "3") {
                    itemData.text = (graphic.area / 10000).toFixed(2) + "公顷";
                }
                // itemData.text =
            }
            graphic.setStyle({
                label: JSON.parse(JSON.stringify(itemData)),
            });

            break;
        default:
            break;
    }
};
/**
 * 标绘图标上传
 */
const fileHpptRequest = (files: any) => {
    const file = files.file;
    // 文件类型限制
    const fileAcceptType = ["png", "jpg", "jpeg"];
    // 上传的文件类型
    const fileType = file.type.split("/")[1];
    // 文件大小限制
    const maxSize = 5; // 1MB
    const fileSizeLimit = 1024 * 1024 * maxSize;
    if (fileAcceptType.includes(fileType) && file.size <= fileSizeLimit) {
        const formData = new FormData(); // 创建FormData对象
        formData.append("file", file);
        uploadDrawIcon(formData)
            .then((res) => {
                // options.icon = res.data.url;
                itemData[data.prop] = res.data.showFileUrl;
                // console.log(res.data);
                change();
                ElMessage.success("上传成功");
            })
            .catch((e) => {
                ElMessage.error(`${e.msg},请稍后再试!`);
            });
    } else {
        ElMessage.error(`请上传${fileAcceptType}类型文件,并且文件大小不超过${maxSize}MB!`);
    }
};
</script>
